<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<style>
  .question-title {
    margin-top: 20px;
  }

  .question-card {
    display: none;
  }

  .question-id {
    font-size: 16px;
    font-weight: bold;
  }

  .question-type {
    font-size: 14px;
    color: #999;
  }

  .question-content {
    margin-top: 10px;
  }

  .answer-container {
    margin-top: 30px;

    .answer {
      display: flex;
      margin: 30px 0;
    }
  }

  .answer .choice {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
  }

  .answer .choice:hover {
    cursor: pointer;
  }

  .question-bottom {
    display: flex;
    justify-content: center;
  }

  .question-bottom button {
    background-color: #3498db;
    color: white;
    padding: 8px 30px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin: 20px;
  }

  .question-bottom button:hover {
    background-color: #0c83ff; /* 鼠标悬停时改变背景颜色 */
  }
</style>

<h3>一、单选题 （共 6 题，每题 10 分）</h3>

<div class="question-card" id="1">
  <div class="question-title">
    <span class="question-id">1.</span>
    <span class="question-type">（单选题，10分）</span>
  </div>

  <div class="question-content">
    <span class="content">数据定义包含哪些数据操作？</span>

    <div class="answer-container">
      <div class="answer">
        <div>
          <span class="choice">A</span>
        </div>
        <div>
          <span>数据查询</span>
        </div>
      </div>
      <div class="answer">
        <div>
          <span class="choice">B</span>
        </div>
        <div>
          <span>定义表</span>
        </div>
      </div>
      <div class="answer">
        <div>
          <span class="choice">C</span>
        </div>
        <div>
          <span>定义模式</span>
        </div>
      </div>
      <div class="answer">
        <div>
          <span class="choice">D</span>
        </div>
        <div>
          <span>创建索引</span>
        </div>
      </div>
    </div>
  </div>

  <div class="question-bottom">
    <button onclick="nextQuestion()">下一题</button>
  </div>
</div>

<div class="question-card" id="2">
  <div class="question-title">
    <span class="question-id">2.</span>
    <span class="question-type">（单选题，10分）</span>
  </div>

  <div class="question-content">
    <span class="content">关于模式schema说法错误的是</span>

    <div class="answer-container">
      <div class="answer">
        <div>
          <span class="choice">A</span>
        </div>
        <div>
          <span>schema是一个命名空间</span>
        </div>
      </div>
      <div class="answer">
        <div>
          <span class="choice">B</span>
        </div>
        <div>
          <span>同一个模式下，可以创建两张同名表</span>
        </div>
      </div>
      <div class="answer">
        <div>
          <span class="choice">C</span>
        </div>
        <div>
          <span> 创建模式的同时可以创建表</span>
        </div>
      </div>
      <div class="answer">
        <div>
          <span class="choice">D</span>
        </div>
        <div>
          <span>DROP SCHEMA WANG CASCADE;实现了删除模式WANG的同时，删除该模式下的所有表 DROP SCHEMA WANG CASCADE;实现了删除模式WANG的同时，删除该模式下的所有表</span>
        </div>
      </div>
    </div>
  </div>

  <div class="question-bottom">
    <button onclick="prevQuestion()">上一题</button>
    <button onclick="nextQuestion()">下一题</button>
  </div>
</div>

<div class="question-card" id="3">
  <div class="question-title">
    <span class="question-id">3.</span>
    <span class="question-type">（单选题，10分）</span>
  </div>

  <div class="question-content">
    <span class="content">1+1=?</span>

    <div class="answer-container">
      <div class="answer">
        <div>
          <span class="choice">A</span>
        </div>
        <div>
          <span>1</span>
        </div>
      </div>
      <div class="answer">
        <div>
          <span class="choice">B</span>
        </div>
        <div>
          <span>2</span>
        </div>
      </div>
      <div class="answer">
        <div>
          <span class="choice">C</span>
        </div>
        <div>
          <span>3</span>
        </div>
      </div>
      <div class="answer">
        <div>
          <span class="choice">D</span>
        </div>
        <div>
          <span>4</span>
        </div>
      </div>
    </div>
  </div>

  <div class="question-bottom">
    <button onclick="prevQuestion()">上一题</button>
    <button onclick="nextQuestion()">下一题</button>
  </div>
</div>

<script>
  function setQuestionIndex() {
    // 获取所有问题卡片元素
    const questionCards = document.querySelectorAll('.question-card');
    const choiceItems = document.querySelectorAll('.choice-item');
    // 遍历所有问题卡片元素，设置索引
    for (let i = 0; i < questionCards.length; i++) {
      questionCards[i].setAttribute('index', i)
      questionCards[i].setAttribute('have-answer', false)
    }
    for (let i = 0; i < choiceItems.length; i++) {
      choiceItems[i].setAttribute('index', i)
    }
    questionCards[0].style.display = 'block';
    choiceItems[0].id = 'current-question'

    for (let i = 0; i < questionCards.length; i++) {
      const index = i;
      const questionCard = questionCards[i];
      const choices = questionCard.querySelectorAll('.choice');

      for (let i = 0; i < choices.length; i++) {
        choices[i].onclick = function () {
          // 移除所有选中样式
          for (let i = 0; i < choices.length; i++) {
            choices[i].style.backgroundColor = '#fff';
          }
          this.style.backgroundColor = '#00bfff';
          questionCards[index].setAttribute('have-answer', true)
        }
      }
    }
  }

  function prevQuestion() {
    const questionCards = document.getElementsByClassName('question-card');
    const choiceItems = document.getElementsByClassName('choice-item');

    for (let i = 0; i < questionCards.length; i++) {
      if (questionCards[i].style.display === 'block') {
        questionCards[i].style.display = 'none';
        if (i > 0) {
          questionCards[i - 1].style.display = 'block';
          const index = i - 1
          for (let j = 0; j < choiceItems.length; j++) {
            choiceItems[j].id = ''
            if (centerHaveAnswered(j)) {
              choiceItems[j].classList.add('has-answer-question')
            }
          }
          choiceItems[index].id = 'current-question'
        }
        break;
      }
    }
  }

  function nextQuestion() {
    const questionCards = document.getElementsByClassName('question-card');
    for (let i = 0; i < questionCards.length; i++) {
      if (questionCards[i].style.display === 'block') {
        questionCards[i].style.display = 'none';
        if (i < questionCards.length - 1) {
          questionCards[i + 1].style.display = 'block';
          const index = i + 1
          for (let j = 0; j < choiceItems.length; j++) {
            choiceItems[j].id = ''
            if (centerHaveAnswered(j)) {
              choiceItems[j].classList.add('has-answer-question')
            }
          }
          choiceItems[index].id = 'current-question'
        }
        break;
      }
    }
  }

  function centerHaveAnswered(index) {
    const questionCards = document.querySelectorAll('.question-card')
    const questionCard = questionCards[index]
    if (questionCard) {
      return questionCard.getAttribute('have-answer') === 'true'
    } else {
      return false
    }
  }
</script>